<template>
  <div class="leftTreenLeftDiv">
    <div class="leftTreenLeftDivtop">
      <p>月度缺限统计</p>
    </div>
    <div id="leftTreenLeftDivfoot" style="width: 100%; height: 280px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    this.init();
  },
  methods: {
    init() {
      var chartDom = document.getElementById("leftTreenLeftDivfoot");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          // feature: {
          //   mark: { show: true },
          //   dataView: { show: true, readOnly: false },
          //   restore: { show: true },
          //   saveAsImage: { show: true },
          // },
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [50, 100],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: [
              { value: 40, name: "rose 1" },
              { value: 38, name: "rose 2" },
              { value: 32, name: "rose 3" },
              { value: 30, name: "rose 4" },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.leftTreenLeftDiv {
  width: 100%;
  height: 100%;
  .leftTreenLeftDivtop {
    width: 120px;
    height: 30px;
    color: #ffffff;
    font-size: 20px;
    stroke-width: 400;
    margin-left: 25px;
    margin-top: 50px;
  }
}
</style>